<!-- 服装款式列表页面 -->
<template>
  <div class="style-list-container">
    <el-card class="filter-card">
      <div class="filter-header">
        <h2>服装款式</h2>
        <div class="right-actions">
          <el-button type="primary" @click="resetFilters">重置筛选</el-button>
        </div>
      </div>
      <el-form :model="filterForm" label-width="80px" inline>
        <el-form-item label="关键词">
          <el-input v-model="filterForm.keyword" placeholder="款式名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="适用季节">
          <el-select v-model="filterForm.season" placeholder="全部" clearable>
            <el-option v-for="item in seasonOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="适用场景">
          <el-select v-model="filterForm.scene" placeholder="全部" clearable>
            <el-option v-for="item in sceneOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="style-card">
      <div class="style-grid">
        <div v-for="style in styleList" :key="style.id" class="style-item" @click="showDetail(style)">
          <div class="style-image">
            <el-image :src="style.imageUrl || defaultImage" :alt="style.name" fit="cover">
              <template #error>
                <div class="image-placeholder">
                  <el-icon><ElPicture /></el-icon>
                </div>
              </template>
            </el-image>
          </div>
          <div class="style-info">
            <h3>{{ style.name }}</h3>
            <div class="style-tags">
              <el-tag size="small" v-if="style.season">{{ style.season }}</el-tag>
              <el-tag size="small" type="success" v-if="style.scene">{{ style.scene }}</el-tag>
            </div>
          </div>
        </div>
      </div>
      
      <div class="empty-data" v-if="styleList.length === 0">
        <el-empty description="暂无款式数据"></el-empty>
      </div>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[8, 16, 24, 32]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    
    <!-- 款式详情弹窗 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="款式详情"
      width="600px"
      destroy-on-close
    >
      <div class="style-detail" v-if="currentStyle">
        <div class="detail-header">
          <div class="detail-image">
            <el-image :src="currentStyle.imageUrl || defaultImage" fit="cover">
              <template #error>
                <div class="image-placeholder">
                  <el-icon><ElPicture /></el-icon>
                </div>
              </template>
            </el-image>
          </div>
          <div class="detail-info">
            <h2>{{ currentStyle.name }}</h2>
            <div class="info-item">
              <span class="label">适用季节：</span>
              <span>{{ currentStyle.season || '未设置' }}</span>
            </div>
            <div class="info-item">
              <span class="label">适用场景：</span>
              <span>{{ currentStyle.scene || '未设置' }}</span>
            </div>
          </div>
        </div>
        
        <div class="detail-description">
          <h3>款式描述</h3>
          <p>{{ currentStyle.description || '暂无描述' }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { Picture } from '@element-plus/icons-vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

export default {
  name: 'StyleList',
  components: {
    ElPicture: Picture
  },
  setup() {
    // 默认图片
    const defaultImage = ref('https://via.placeholder.com/200x300?text=暂无图片')
    
    // 款式列表
    const styleList = ref([])
    
    // 筛选表单
    const filterForm = reactive({
      keyword: '',
      season: '',
      scene: ''
    })
    
    // 分页设置
    const pagination = reactive({
      currentPage: 1,
      pageSize: 16,
      total: 0
    })
    
    // 季节选项
    const seasonOptions = [
      { value: 'spring', label: '春季' },
      { value: 'summer', label: '夏季' },
      { value: 'autumn', label: '秋季' },
      { value: 'winter', label: '冬季' },
      { value: 'all', label: '四季' }
    ]
    
    // 场景选项
    const sceneOptions = [
      { value: 'casual', label: '休闲' },
      { value: 'formal', label: '正式' },
      { value: 'business', label: '商务' },
      { value: 'party', label: '派对' },
      { value: 'sports', label: '运动' },
      { value: 'wedding', label: '婚礼' }
    ]
    
    // 详情弹窗
    const detailDialogVisible = ref(false)
    const currentStyle = ref(null)
    
    // 获取款式列表
    const fetchData = async () => {
      try {
        // 构建查询参数
        const params = {
          page: pagination.currentPage - 1,
          size: pagination.pageSize
        }
        
        if (filterForm.keyword) {
          params.keyword = filterForm.keyword
        }
        
        if (filterForm.season) {
          params.season = filterForm.season
        }
        
        if (filterForm.scene) {
          params.scene = filterForm.scene
        }
        
        const response = await axios.get('/api/clothing/styles', { params })
        
        if (response.data.code === 200) {
          // 模拟数据，实际项目中应该使用后端返回的数据
          const mockData = simulateData(params)
          styleList.value = mockData.content
          pagination.total = mockData.totalElements
        } else {
          ElMessage.error(response.data.message || '获取款式列表失败')
        }
      } catch (error) {
        console.error('获取款式列表失败:', error)
        ElMessage.error('获取款式列表失败，请稍后重试')
        
        // 模拟数据，实际项目中移除
        const mockData = simulateData({})
        styleList.value = mockData.content
        pagination.total = mockData.totalElements
      }
    }
    
    // 重置筛选条件
    const resetFilters = () => {
      filterForm.keyword = ''
      filterForm.season = ''
      filterForm.scene = ''
      pagination.currentPage = 1
      fetchData()
    }
    
    // 显示详情
    const showDetail = (style) => {
      currentStyle.value = style
      detailDialogVisible.value = true
    }
    
    // 处理每页数量变化
    const handleSizeChange = (size) => {
      pagination.pageSize = size
      fetchData()
    }
    
    // 处理页码变化
    const handleCurrentChange = (page) => {
      pagination.currentPage = page
      fetchData()
    }
    
    // 模拟数据，实际项目中应该使用后端返回的数据
    const simulateData = (params) => {
      const allStyles = [
        {
          id: 1,
          name: '简约商务风衬衫',
          description: '简约大方的商务风格衬衫，适合职场正式场合，舒适透气的面料让你在工作中保持清爽。',
          imageUrl: 'https://via.placeholder.com/400x600?text=简约商务风衬衫',
          scene: '商务',
          season: '四季'
        },
        {
          id: 2,
          name: '复古风格连衣裙',
          description: '复古风格设计的连衣裙，优雅大方，适合各种社交场合，展现女性魅力。',
          imageUrl: 'https://via.placeholder.com/400x600?text=复古风格连衣裙',
          scene: '派对',
          season: '春季'
        },
        {
          id: 3,
          name: '运动休闲卫衣',
          description: '舒适的运动休闲卫衣，采用优质面料，保暖透气，适合日常休闲或运动时穿着。',
          imageUrl: 'https://via.placeholder.com/400x600?text=运动休闲卫衣',
          scene: '休闲',
          season: '秋季'
        },
        {
          id: 4,
          name: '修身西装套装',
          description: '修身剪裁的西装套装，彰显职业风范，适合商务会议、正式场合等。',
          imageUrl: 'https://via.placeholder.com/400x600?text=修身西装套装',
          scene: '正式',
          season: '四季'
        },
        {
          id: 5,
          name: '轻薄夏季T恤',
          description: '轻薄透气的夏季T恤，采用吸汗速干面料，适合夏季户外活动穿着。',
          imageUrl: 'https://via.placeholder.com/400x600?text=轻薄夏季T恤',
          scene: '休闲',
          season: '夏季'
        },
        {
          id: 6,
          name: '保暖羽绒服',
          description: '高填充度的保暖羽绒服，防风防寒，适合严寒冬季穿着。',
          imageUrl: 'https://via.placeholder.com/400x600?text=保暖羽绒服',
          scene: '休闲',
          season: '冬季'
        },
        {
          id: 7,
          name: '婚礼礼服',
          description: '精美设计的婚礼礼服，适合各种婚礼场合，让你成为焦点。',
          imageUrl: 'https://via.placeholder.com/400x600?text=婚礼礼服',
          scene: '婚礼',
          season: '四季'
        },
        {
          id: 8,
          name: '运动健身裤',
          description: '弹性面料制作的运动健身裤，舒适贴合，适合各种运动锻炼。',
          imageUrl: 'https://via.placeholder.com/400x600?text=运动健身裤',
          scene: '运动',
          season: '四季'
        }
      ]
      
      // 根据筛选条件过滤
      let filteredData = [...allStyles]
      
      if (params.keyword) {
        filteredData = filteredData.filter(item => 
          item.name.includes(params.keyword) || 
          (item.description && item.description.includes(params.keyword))
        )
      }
      
      if (params.season && params.season !== 'all') {
        filteredData = filteredData.filter(item => 
          item.season === params.season || item.season === '四季'
        )
      }
      
      if (params.scene) {
        filteredData = filteredData.filter(item => 
          item.scene === params.scene
        )
      }
      
      // 模拟分页
      const page = params.page || 0
      const size = params.size || 16
      const start = page * size
      const end = start + size
      
      return {
        content: filteredData.slice(start, end),
        totalElements: filteredData.length,
        totalPages: Math.ceil(filteredData.length / size),
        size: size,
        number: page
      }
    }
    
    onMounted(() => {
      fetchData()
    })
    
    return {
      styleList,
      filterForm,
      pagination,
      seasonOptions,
      sceneOptions,
      defaultImage,
      detailDialogVisible,
      currentStyle,
      fetchData,
      resetFilters,
      showDetail,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
.style-list-container {
  padding: 20px;
}

.filter-card {
  margin-bottom: 20px;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filter-header h2 {
  margin: 0;
  font-size: 18px;
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.style-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.style-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.style-image {
  height: 240px;
  overflow: hidden;
}

.style-image .el-image {
  width: 100%;
  height: 100%;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 24px;
}

.style-info {
  padding: 12px;
}

.style-info h3 {
  margin: 0 0 8px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.style-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.style-tags .el-tag {
  margin-right: 5px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.style-detail {
  padding: 10px;
}

.detail-header {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.detail-image {
  width: 200px;
  height: 300px;
  overflow: hidden;
  border-radius: 8px;
}

.detail-image .el-image {
  width: 100%;
  height: 100%;
}

.detail-info {
  flex: 1;
}

.detail-info h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 20px;
}

.info-item {
  margin-bottom: 10px;
  font-size: 14px;
}

.info-item .label {
  font-weight: bold;
  color: #606266;
}

.detail-description {
  margin-top: 20px;
  border-top: 1px solid #ebeef5;
  padding-top: 20px;
}

.detail-description h3 {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 10px;
}

.detail-description p {
  margin: 0;
  line-height: 1.6;
  color: #606266;
}

.empty-data {
  margin: 40px 0;
}
</style>